<html>
  <head>
    <meta charset="utf-8" />
    <title>MES看板</title>
    <script src="./static/jquery.min.js"></script>
    <script src="./static/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/index.css" />
    <link rel="stylesheet" type="text/css" href="./static/element/index.css" />
  </head>
  <body>
    <style>
      .kanban {
        width: 100%;
        height: 100%;
        background-image: url(./static/images/bg.jpg);
        background-size: cover;
        color: #666666;
      }
      .main {
        width: 100%;
        height: 100%;
      }
      .canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
      }
    </style>
    <!-- <div class="canvas" style="opacity: 0.2;">
      <iframe frameborder="0" src="./background.html" style="width: 100%; height: 100%;"></iframe>
    </div> -->
    <div id="app" class="kanban">
      <div style="font-size: 30px;">
        <a href="./cj_01.html">CJ01</a>
        <a href="./cj_02.html">CJ02</a>
        <a href="./kh_01.html">CJ03</a>
        <a href="./jctc_01.html">JCTC01</a>
        <a href="./jctc_02.html">JCTC02</a>
        <a href="./jctc_03.html">JCTC03</a>
        <a href="./jctc_04.html">JCTC04</a>
      </div>
      <el-dialog title="请选择要显示的看板" :visible.sync="dialogVisible" width="80%">
        <div style="padding: 0.2rem;" v-for="(d,i) in orglist" :key="i">
          <el-button style="width: 100%;" @click.prevent="chooseOrg(d)" type="primary" plain>
            {{d.param_value}}
          </el-button>
        </div>
      </el-dialog>
    </div>
  </body>
  <script src="./static/element/index.js"></script>
  <script>
    var URL = 'http://' + location.hostname + ':8080/mes_api'

    //根据窗口宽度动态设置根节点的字体大小
    var remPx = 12
    function setRem() {
      var html = document.getElementsByTagName('html')[0]
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth
      remPx = parseInt(oWidth / 80)
      html.style.fontSize = remPx + 'px'
    }
    setRem()

    //窗口大小变化监听
    window.onresize = function() {
      setRem()
    }

    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          URL: URL,
          remPx: remPx, //根字体大小px
          orglist: [],
          dialogVisible: true,
        }
      },
      methods: {
        // selectOrg: function() {
        //   //打开组织选择框
        //   this.selectOrgLayerIndex = layer.open({
        //     type: 1,
        //     title: '请选择要显示的看板',
        //     closeBtn: false,
        //     area: [40 * remPx + 'px'],
        //     btn: '取消',
        //     content: $('#selectOrgArea'),
        //     cancel: function() {},
        //   })
        // },
        chooseOrg: function(d) {
          window.location = d.param_condition1
        },
      },
      mounted: function() {
        var that = this
        //获取KBN列表
        $.get(URL + '/kbn/getlist', {}, function(r) {
          that.orglist = r.datas
          this.dialogVisible = true
        })
      },
    })
  </script>
</html>
